<template>
  <div>
    <component :is="templateName" v-if="template" :template="templateId" />
    <div v-else style="width: 100%;margin: 0 auto;padding: 40px 100px;box-sizing: border-box;position: relative;text-align: center">
      <el-image :src="images" class="el-image" lazy />
    </div>
  </div>
</template>

<script>
import setImage from '@/assets/images/nomessage.png'
export default {
  name: 'TemplateColumn',
  props: {
    template: {
      type: String,
      require: false
    },
    templateId: {
      type: Number,
      require: false
    }
  },
  data() {
    return {
      type: this.template,
      templateName: null,
      images: setImage
    }
  },
  watch: {
    template: {
      handler(newName, oldName) { // 值发生变化时
        if (newName == null || newName === '') {
          this.templateName = null
        } else {
          this.type = newName
          const res = () => import(`./template/${this.type}`)
          this.templateName = res
        }
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  mounted() {
    if (this.template != null && this.template !== '') {
      const res = () => import(`./template/${this.type}`)
      this.templateName = res
    }
  },
  methods: {
    getRules(data) {
      this.$emit('changeRules', data)
    }
  }
}
</script>

<style scoped>
.el-image{
  margin: 0 auto;
}
.el-custom-message{
  width: 100%;
  position: absolute;
  color: #00a0e9;
  text-align: center;
}
</style>
